<template>
  <div class="tentativeplan-control">
    <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.tentativeplan')}}</div>
    <el-row>
      <el-col :span="12">
         <el-form
           ref="manual"
           label-position="left"
           :model="manualInfo"
           label-width="100px">
           <el-form-item
                :label="$t('openatccomponents.overview.patternid') + ':'"
                prop="count">
                <el-select @change="selectPattern()" v-model="manualInfo.tempPatternid" class="col-inner"  size="small" :placeholder="$t('openatccomponents.common.select')">
                  <el-option
                    v-for="item in patternSelect"
                    :key="item.value"
                    :value="item.desc">
                  </el-option>
                </el-select>
               <!-- <el-input v-model="manualInfo.tempDuration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
            </el-form-item>
            <el-form-item
                :label="$t('openatccomponents.overview.delay') + ':'"
                prop="intersection">
               <el-input v-model="manualInfo.tempDelay" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input>
            </el-form-item>
           </el-form>
      </el-col>
      <el-col :span="12">
         <el-form
           ref="manual"
           label-position="left"
           :model="manualInfo"
           label-width="100px">
           <el-form-item
                :label="$t('openatccomponents.overview.patternoffset') + ':'"
                prop="count">
               <el-input v-model="manualInfo.offset" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input>
            </el-form-item>
            <el-form-item
                :label="$t('openatccomponents.overview.duration') + ':'"
                prop="intersection">
               <el-input v-model="manualInfo.duration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input>
            </el-form-item>
           </el-form>
      </el-col>
    </el-row>
    <el-row>
        <div class="title" style="margin-top:18px; margin-bottom:10px">{{$t('openatccomponents.overview.patternstate')}}:
            <span>({{$t('openatccomponents.overview.cycle')}}: {{cycle}}  {{$t('openatccomponents.overview.patternoffset')}}: {{offset}})</span>
        </div>
        <stage-status
        :patternStatusList="patternOne.length===0?planPattern.rings:patternOne[0].rings"
        >
        </stage-status>
        <pattern-list
        :patternList="patternOne.length===0?planPattern.rings:patternOne"
        :patternStatusList="patternOne.length===0?planPattern.rings:patternOne[0].rings"
        :cycles="patternOne.length===0?planPattern.cycle:patternOne[0].cycle"
        :phaseList="phaseList">
        </pattern-list>
    </el-row>
    <el-row>
    <el-tabs v-model="activeList" type="card">
        <el-tab-pane :label="$t('openatccomponents.pattern.ringConfig')" name="ring">
            <!-- <el-row :gutter="20"> -->
                <!-- <el-col :span="12" > -->
                    <!-- <div class="components-container board" > -->
                        <div style="width: 100%; overflow: hidden;margin-top: 20px;">
                            <kan-ban v-for="n in ringCount"
                            :key="n" class="closephasekanban"
                            :index="n"
                            :options="patternOne.length===0?allPatternList[0].options:patternOne[0].options"
                            :list="patternOne.length===0?planPattern.rings[n-1]:patternOne[0].rings[n-1]"
                            :phaseList="phaseList"
                            :header-text="$t('openatccomponents.pattern.ring')+n"
                            @handleSplit="handleSplit">
                            </kan-ban>
                        </div>
                <!-- </el-col> -->
            <!-- </el-row> -->
        </el-tab-pane>
        <el-tab-pane :label="$t('openatccomponents.pattern.stageConfig')" name="kanban">
            <el-scrollbar :vertical="true">
                <div class="stage-panel-contener">
                    <stage-board v-for="(stage,index) in patternOne.length===0?allPatternList[0].stagesList:patternOne[0].stagesList"
                        class="closephasekanban"
                        :key="index"
                        :stage="stage"
                        :options="patternOne.length===0?allPatternList[0].options:patternOne[0].options"
                        :stageInfo="patternOne.length===0?allPatternList[0].stagesList:patternOne[0].stagesList"
                        :coordphaseOption="coordphaseOption"
                        :subIndex="index"
                        @onStageSplitChange="onStageSplitChange"
                        @stageSplitChange="stageSplitChange"
                        @onStageDelaystartChange="onStageDelaystartChange"
                        @onStageAdvanceendChange="onStageAdvanceendChange"
                        >
                    </stage-board>
                </div>
            </el-scrollbar>
        </el-tab-pane>
            <el-tab-pane :label="$t('openatccomponents.pattern.parameters')" name="parame">
                <el-row>
                <!-- <el-col :span="12"> -->
                    <expend-config
                    v-for="(j,index) in ringCounts"
                    :key="index"
                    class="closephasekanban"
                    :options="patternOne.length===0?allPatternList[0].options:patternOne[0].options"
                    :header-text="$t('openatccomponents.pattern.ring')+j"
                    :list="patternOne.length===0?planPattern.rings[j-1]:patternOne[0].rings[j-1]"
                    >
                    </expend-config>
                <!-- </el-col> -->
                <!-- <el-col :span="12"> -->
                    <div style="width: 60%;margin: 10px auto;color:#ffffff">
                        {{$t('openatccomponents.pattern.forbiddenstage')}}
                        <el-input class="stage-value" size="small" v-model="forbiddenstage"></el-input>
                    </div>
                    <div style="width: 60%;margin: 10px auto;color:#ffffff">
                        {{$t('openatccomponents.pattern.screenstage')}}
                        <el-input class="stage-value" size="small" v-model="screenstage"></el-input>
                    </div>
                    <div style="width: 60%;margin: 10px auto;color:#ffffff">
                        <!-- <el-col :span="8"> -->
                        {{$t('openatccomponents.pattern.coordinatestage')}}
                        <el-input class="stage-value" size="small" v-model="coordinatestage"></el-input>
                        <!-- </el-col> -->
                    </div>
                <!-- </el-col> -->
                </el-row>
            </el-tab-pane>
            <el-tab-pane :label="$t('openatccomponents.pattern.overLap')" name="overlap">
                <el-row :gutter="20">
                <el-col :span="24" >
                    <over-lap
                    :stageList="stagesList"
                    :overlap="overlap"
                    :checked="true"
                    :tentative="true"
                    :cycle="patternOne.length===0?planPattern.cycle:patternOne[0].cycle"
                    >
                    </over-lap>
                </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </el-row>
    <div class="footer">
        <el-button @click="handleClose()">{{$t('openatccomponents.button.Back')}}</el-button>
        <el-button type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.implement')}}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tentativeplancontrol',
  props: {
    controlData: {
      type: Object
    },
    phaseList: {
      type: Array
    },
    overlap: {
      type: Array
    },
    allPatternList: {
      type: Array
    },
    patternSelect: {
      type: Array
    }
  },
  computed: {
    rings () {
      return this.patternOne.length === 0 ? this.planPattern.rings : this.patternOne[0].rings
    },
    cycle () {
      return this.patternOne.length === 0 ? this.max : (this.patternOne.length > 0 && (this.patternOne[0].cycle < this.max)) ? this.max : this.patternOne[0].cycle
    },
    offset () {
      return Number((this.patternOne.length === 0 || this.manualInfo.offset > 0) ? this.manualInfo.offset : this.patternOne[0].offset)
    },
    forbiddenstage () {
      return this.patternOne.length === 0 ? this.allPatternList[0].forbiddenstage : this.patternOne[0].forbiddenstage
    },
    screenstage () {
      return this.patternOne.length === 0 ? this.allPatternList[0].screenstage : this.patternOne[0].screenstage
    },
    coordinatestage () {
      return this.patternOne.length === 0 ? this.allPatternList[0].coordinatestage : this.patternOne[0].coordinatestage
    }
  },
  data () {
    return {
      stagesList: [],
      phaseRings: [],
      options: {
        group: 'pattern'
      },
      // overlap: [
      //   {
      //     'id': 1,
      //     'desc': '东方向南半测行人相位',
      //     'includedphases': [
      //       1,
      //       8
      //     ],
      //     'peddirection': [
      //       6
      //     ]
      //   },
      //   {
      //     'id': 2,
      //     'desc': '东方向北半测行人相位',
      //     'includedphases': [
      //       1,
      //       2
      //     ],
      //     'peddirection': [
      //       5
      //     ]
      //   },
      //   {
      //     'id': 3,
      //     'desc': '西方向南半测行人相位',
      //     'includedphases': [
      //       5,
      //       6
      //     ],
      //     'peddirection': [
      //       8
      //     ]
      //   },
      //   {
      //     'id': 4,
      //     'desc': '西方向北半测行人相位',
      //     'includedphases': [
      //       4,
      //       5
      //     ],
      //     'peddirection': [
      //       7
      //     ]
      //   },
      //   {
      //     'id': 5,
      //     'desc': '南方向东半测行人相位',
      //     'includedphases': [
      //       7,
      //       8
      //     ],
      //     'peddirection': [
      //       10
      //     ]
      //   },
      //   {
      //     'id': 6,
      //     'desc': '南方向西半测行人相位',
      //     'includedphases': [
      //       6,
      //       7
      //     ],
      //     'peddirection': [
      //       9
      //     ]
      //   },
      //   {
      //     'id': 7,
      //     'desc': '北方向东半测行人相位',
      //     'includedphases': [
      //       2,
      //       3
      //     ],
      //     'peddirection': [
      //       12
      //     ]
      //   },
      //   {
      //     'id': 8,
      //     'desc': '北方向西半测行人相位',
      //     'includedphases': [
      //       3,
      //       4
      //     ],
      //     'peddirection': [
      //       11
      //     ]
      //   }
      // ],
      max: '',
      patternCycleEqual: true,
      activeList: 'ring',
      ringCount: 1,
      ringCounts: 1,
      coordphaseOption: [],
      patternOne: [],
      planPattern: {},
      // allPatternList: [
      //   {
      //     'id': 1,
      //     'desc': '',
      //     'offset': 10,
      //     'cycle': 120,
      //     'rings': [
      //       [
      //         {
      //           'name': 'phase1',
      //           'id': 1,
      //           'value': 30,
      //           'mode': 2,
      //           'options': [],
      //           'minSplit': 20,
      //           'desc': [
      //             {
      //               'id': 13,
      //               'color': '#454545'
      //             }
      //           ]
      //         },
      //         {
      //           'name': 'phase2',
      //           'id': 2,
      //           'value': 30,
      //           'mode': 2,
      //           'options': [],
      //           'minSplit': 20,
      //           'desc': [
      //             {
      //               'id': 10,
      //               'color': '#454545'
      //             },
      //             {
      //               'id': 12,
      //               'color': '#454545'
      //             }
      //           ]
      //         },
      //         {
      //           'name': 'phase3',
      //           'id': 3,
      //           'value': 30,
      //           'mode': 2,
      //           'options': [],
      //           'minSplit': 20,
      //           'desc': [
      //             {
      //               'id': 1,
      //               'color': '#454545'
      //             }
      //           ]
      //         },
      //         {
      //           'name': 'phase4',
      //           'id': 4,
      //           'value': 30,
      //           'mode': 2,
      //           'options': [],
      //           'minSplit': 20,
      //           'desc': [
      //             {
      //               'id': 6,
      //               'color': '#454545'
      //             },
      //             {
      //               'id': 8,
      //               'color': '#454545'
      //             }
      //           ]
      //         }
      //       ],
      //       [
      //         {
      //           'name': 'phase5',
      //           'id': 5,
      //           'value': 30,
      //           'mode': 2,
      //           'options': [],
      //           'minSplit': 20,
      //           'desc': [
      //             {
      //               'id': 9,
      //               'color': '#454545'
      //             }
      //           ]
      //         },
      //         {
      //           'name': 'phase6',
      //           'id': 6,
      //           'value': 30,
      //           'mode': 2,
      //           'options': [],
      //           'minSplit': 20,
      //           'desc': [
      //             {
      //               'id': 14,
      //               'color': '#454545'
      //             },
      //             {
      //               'id': 16,
      //               'color': '#454545'
      //             }
      //           ]
      //         },
      //         {
      //           'name': 'phase7',
      //           'id': 7,
      //           'value': 30,
      //           'mode': 2,
      //           'options': [],
      //           'minSplit': 20,
      //           'desc': [
      //             {
      //               'id': 5,
      //               'color': '#454545'
      //             }
      //           ]
      //         },
      //         {
      //           'name': 'phase8',
      //           'id': 8,
      //           'value': 30,
      //           'mode': 2,
      //           'options': [],
      //           'minSplit': 20,
      //           'desc': [
      //             {
      //               'id': 2,
      //               'color': '#454545'
      //             },
      //             {
      //               'id': 4,
      //               'color': '#454545'
      //             }
      //           ]
      //         }
      //       ],
      //       [],
      //       []
      //     ],
      //     'barriers': [
      //       {
      //         'barrier': 1,
      //         'length': 60,
      //         'items': [
      //           {
      //             'ring': 2,
      //             'data': [
      //               5,
      //               6
      //             ]
      //           },
      //           {
      //             'ring': 1,
      //             'data': [
      //               1,
      //               2
      //             ]
      //           }
      //         ]
      //       },
      //       {
      //         'barrier': 2,
      //         'length': 60,
      //         'items': [
      //           {
      //             'ring': 2,
      //             'data': [
      //               7,
      //               8
      //             ]
      //           },
      //           {
      //             'ring': 1,
      //             'data': [
      //               3,
      //               4
      //             ]
      //           }
      //         ]
      //       }
      //     ],
      //     'stagesList': [
      //       {
      //         'split': 30,
      //         'stages': [
      //           1,
      //           5
      //         ]
      //       },
      //       {
      //         'split': 30,
      //         'stages': [
      //           2,
      //           6
      //         ]
      //       },
      //       {
      //         'split': 30,
      //         'stages': [
      //           3,
      //           7
      //         ]
      //       },
      //       {
      //         'split': 30,
      //         'stages': [
      //           4,
      //           8
      //         ]
      //       }
      //     ],
      //     'stages': [
      //       [
      //         1,
      //         5
      //       ],
      //       [
      //         2,
      //         6
      //       ],
      //       [
      //         3,
      //         7
      //       ],
      //       [
      //         4,
      //         8
      //       ]
      //     ]
      //   },
      //   {
      //     'id': 2,
      //     'desc': '方案2',
      //     'offset': 0,
      //     'cycle': 110,
      //     'rings': [
      //       [
      //         {
      //           'name': 'phase1',
      //           'id': 1,
      //           'value': 20,
      //           'mode': 2,
      //           'options': [
      //             0,
      //             0,
      //             0
      //           ],
      //           'minSplit': 13,
      //           'delaystart': 0,
      //           'advanceend': 0
      //         },
      //         {
      //           'name': 'phase2',
      //           'id': 2,
      //           'value': 35,
      //           'mode': 2,
      //           'options': [
      //             0,
      //             0,
      //             0
      //           ],
      //           'minSplit': 13,
      //           'delaystart': 0,
      //           'advanceend': 0
      //         },
      //         {
      //           'name': 'phase3',
      //           'id': 3,
      //           'value': 30,
      //           'mode': 2,
      //           'options': [
      //             0,
      //             0,
      //             0
      //           ],
      //           'minSplit': 13,
      //           'delaystart': 0,
      //           'advanceend': 0
      //         },
      //         {
      //           'name': 'phase4',
      //           'id': 4,
      //           'value': 25,
      //           'mode': 2,
      //           'options': [
      //             0,
      //             0,
      //             0
      //           ],
      //           'minSplit': 13,
      //           'delaystart': 0,
      //           'advanceend': 0
      //         }
      //       ],
      //       [
      //         {
      //           'name': 'Phase 5',
      //           'id': 5,
      //           'value': 27,
      //           'mode': 2,
      //           'options': [
      //             0,
      //             0,
      //             0
      //           ],
      //           'minSplit': 13,
      //           'delaystart': 0,
      //           'advanceend': 0
      //         },
      //         {
      //           'name': 'Phase 6',
      //           'id': 6,
      //           'value': 28,
      //           'mode': 2,
      //           'options': [
      //             0,
      //             0,
      //             0
      //           ],
      //           'minSplit': 13,
      //           'delaystart': 0,
      //           'advanceend': 0
      //         },
      //         {
      //           'name': 'Phase 7',
      //           'id': 7,
      //           'value': 35,
      //           'mode': 2,
      //           'options': [
      //             0,
      //             0,
      //             0
      //           ],
      //           'minSplit': 13,
      //           'delaystart': 0,
      //           'advanceend': 0
      //         },
      //         {
      //           'name': 'Phase 8',
      //           'id': 8,
      //           'value': 20,
      //           'mode': 2,
      //           'options': [
      //             0,
      //             0,
      //             0
      //           ],
      //           'minSplit': 13,
      //           'delaystart': 0,
      //           'advanceend': 0
      //         }
      //       ],
      //       [],
      //       []
      //     ],
      //     'stagesList': [
      //       {
      //         'split': 20,
      //         'stages': [
      //           1,
      //           5
      //         ],
      //         'delaystart': 0,
      //         'advanceend': 0
      //       },
      //       {
      //         'split': 7,
      //         'stages': [
      //           2,
      //           5
      //         ],
      //         'delaystart': 0,
      //         'advanceend': 0
      //       },
      //       {
      //         'split': 28,
      //         'stages': [
      //           2,
      //           6
      //         ],
      //         'delaystart': 0,
      //         'advanceend': 0
      //       },
      //       {
      //         'split': 30,
      //         'stages': [
      //           3,
      //           7
      //         ],
      //         'delaystart': 0,
      //         'advanceend': 0
      //       },
      //       {
      //         'split': 5,
      //         'stages': [
      //           4,
      //           7
      //         ],
      //         'delaystart': 0,
      //         'advanceend': 0
      //       },
      //       {
      //         'split': 20,
      //         'stages': [
      //           4,
      //           8
      //         ],
      //         'delaystart': 0,
      //         'advanceend': 0
      //       }
      //     ],
      //     'stages': [
      //       [
      //         1,
      //         5
      //       ],
      //       [
      //         2,
      //         5
      //       ],
      //       [
      //         2,
      //         6
      //       ],
      //       [
      //         3,
      //         7
      //       ],
      //       [
      //         4,
      //         7
      //       ],
      //       [
      //         4,
      //         8
      //       ]
      //     ],
      //     'barriers': [
      //       {
      //         'barrier': 1,
      //         'length': 55,
      //         'items': [
      //           {
      //             'ring': 2,
      //             'data': [
      //               5,
      //               6
      //             ]
      //           },
      //           {
      //             'ring': 1,
      //             'data': [
      //               1,
      //               2
      //             ]
      //           }
      //         ]
      //       },
      //       {
      //         'barrier': 2,
      //         'length': 55,
      //         'items': [
      //           {
      //             'ring': 2,
      //             'data': [
      //               7,
      //               8
      //             ]
      //           },
      //           {
      //             'ring': 1,
      //             'data': [
      //               3,
      //               4
      //             ]
      //           }
      //         ]
      //       }
      //     ]
      //   },
      //   {
      //     'id': 3,
      //     'desc': '方案3',
      //     'offset': 0,
      //     'cycle': 120,
      //     'rings': [
      //       [
      //         {
      //           'name': 'phase1',
      //           'id': 1,
      //           'value': 40,
      //           'mode': 2,
      //           'options': [
      //             0,
      //             0,
      //             0
      //           ],
      //           'minSplit': 13,
      //           'delaystart': 0,
      //           'advanceend': 0
      //         },
      //         {
      //           'name': 'phase2',
      //           'id': 2,
      //           'value': 20,
      //           'mode': 2,
      //           'options': [
      //             0,
      //             0,
      //             0
      //           ],
      //           'minSplit': 13,
      //           'delaystart': 0,
      //           'advanceend': 0
      //         },
      //         {
      //           'name': 'phase3',
      //           'id': 3,
      //           'value': 30,
      //           'mode': 2,
      //           'options': [
      //             0,
      //             0,
      //             0
      //           ],
      //           'minSplit': 13,
      //           'delaystart': 0,
      //           'advanceend': 0
      //         },
      //         {
      //           'name': 'phase4',
      //           'id': 4,
      //           'value': 30,
      //           'mode': 2,
      //           'options': [
      //             0,
      //             0,
      //             0
      //           ],
      //           'minSplit': 13,
      //           'delaystart': 0,
      //           'advanceend': 0
      //         }
      //       ],
      //       [
      //         {
      //           'name': 'Phase 5',
      //           'id': 5,
      //           'value': 20,
      //           'mode': 2,
      //           'options': [
      //             0,
      //             0,
      //             0
      //           ],
      //           'minSplit': 13,
      //           'delaystart': 0,
      //           'advanceend': 0
      //         },
      //         {
      //           'name': 'Phase 6',
      //           'id': 6,
      //           'value': 40,
      //           'mode': 2,
      //           'options': [
      //             0,
      //             0,
      //             0
      //           ],
      //           'minSplit': 13,
      //           'delaystart': 0,
      //           'advanceend': 0
      //         },
      //         {
      //           'name': 'Phase 7',
      //           'id': 7,
      //           'value': 30,
      //           'mode': 2,
      //           'options': [
      //             0,
      //             0,
      //             0
      //           ],
      //           'minSplit': 13,
      //           'delaystart': 0,
      //           'advanceend': 0
      //         },
      //         {
      //           'name': 'Phase 8',
      //           'id': 8,
      //           'value': 30,
      //           'mode': 2,
      //           'options': [
      //             0,
      //             0,
      //             0
      //           ],
      //           'minSplit': 13,
      //           'delaystart': 0,
      //           'advanceend': 0
      //         }
      //       ],
      //       [],
      //       []
      //     ],
      //     'stagesList': [
      //       {
      //         'split': 20,
      //         'stages': [
      //           1,
      //           5
      //         ],
      //         'delaystart': 0,
      //         'advanceend': 0
      //       },
      //       {
      //         'split': 20,
      //         'stages': [
      //           1,
      //           6
      //         ],
      //         'delaystart': 0,
      //         'advanceend': 0
      //       },
      //       {
      //         'split': 20,
      //         'stages': [
      //           2,
      //           6
      //         ],
      //         'delaystart': 0,
      //         'advanceend': 0
      //       },
      //       {
      //         'split': 30,
      //         'stages': [
      //           3,
      //           7
      //         ],
      //         'delaystart': 0,
      //         'advanceend': 0
      //       },
      //       {
      //         'split': 30,
      //         'stages': [
      //           4,
      //           8
      //         ],
      //         'delaystart': 0,
      //         'advanceend': 0
      //       }
      //     ],
      //     'stages': [
      //       [
      //         1,
      //         5
      //       ],
      //       [
      //         1,
      //         6
      //       ],
      //       [
      //         2,
      //         6
      //       ],
      //       [
      //         3,
      //         7
      //       ],
      //       [
      //         4,
      //         8
      //       ]
      //     ],
      //     'barriers': [
      //       {
      //         'barrier': 1,
      //         'length': 60,
      //         'items': [
      //           {
      //             'ring': 2,
      //             'data': [
      //               5,
      //               6
      //             ]
      //           },
      //           {
      //             'ring': 1,
      //             'data': [
      //               1,
      //               2
      //             ]
      //           }
      //         ]
      //       },
      //       {
      //         'barrier': 2,
      //         'length': 60,
      //         'items': [
      //           {
      //             'ring': 2,
      //             'data': [
      //               7,
      //               8
      //             ]
      //           },
      //           {
      //             'ring': 1,
      //             'data': [
      //               3,
      //               4
      //             ]
      //           }
      //         ]
      //       }
      //     ]
      //   }
      // ],
      manualInfo: {
        tempPatternid: '',
        offset: 0,
        duration: 300,
        tempDelay: 0 // 控制方式手动操作的情况下的延迟时间的临时值。
        // tempDuration: 300 // 控制方式手动操作的情况下的持续时间的临时值。
      }
    }
  },
  created () {
    this.patternPlan()
    this.getCycle()
    if (this.patternOne.length === 0) {
      this.handleStageData(this.planPattern.rings)
    }
    this.initData()
  },
  methods: {
    patternPlan () {
      let Pattern = {
        offset: 0,
        cycle: 0,
        rings: [[], [], [], []]
      }
      var newPattern = JSON.parse(JSON.stringify(Pattern))
      for (let phase of this.phaseList) {
        let ring = {}
        ring.name = 'Phase ' + phase.id
        ring.desc = this.getPhaseDescription(phase.direction)
        ring.id = phase.id
        ring.value = 30
        ring.mode = 2
        ring.options = []
        ring.delaystart = 0
        ring.advanceend = 0
        if (phase.ring === 1) {
          newPattern.rings[0].push(ring)
        } else if (phase.ring === 2) {
          newPattern.rings[1].push(ring)
        } else if (phase.ring === 3) {
          newPattern.rings[2].push(ring)
        } else if (phase.ring === 4) {
          newPattern.rings[3].push(ring)
        }
      }
      this.planPattern = newPattern
    },
    getCycle () {
      for (let rings of this.planPattern.rings) {
        let num = 0
        for (let i = 0; i < rings.length; i++) {
          if (rings[i].length !== 0) {
            if (rings[i].mode === 7) { // 忽略相位不计周期
              continue
            }
            num = num + Number(rings[i].value)
          }
        }
        if (num !== 0) {
          this.planPattern.cycle = num
          break
        }
      }
    },
    getPhaseDescription (phaseList) {
      if (!phaseList) return
      let list = []
      for (let id of phaseList) {
        let obj = {}
        obj.id = id
        obj.color = '#454545'
        list.push(obj)
      }
      return list
    },
    handleClose () {
      this.$emit('closePhaseBack')
    },
    onStageSplitChange (diff, rowIndex, subIndex) {
      let stageArr = this.stagesList[subIndex].stages
      let row = this.patternList[rowIndex]
      let ringsList = row.rings
      for (let rings of ringsList) {
        for (let ring of rings) {
          if (stageArr.includes(ring.id)) {
            ring.value = (ring.value ? ring.value : 0) + diff
            continue
          }
        }
      }
    },
    stageSplitChange (diff, rowIndex, subIndex) {
      let row = this.patternList[rowIndex]
      let ringsList = row.stagesList
      for (let rings of ringsList) {
        if (subIndex === rings.key) {
          rings.stageSplit = (rings.green ? rings.green : 0) + (rings.yellow ? rings.yellow : 0) + (rings.red ? rings.red : 0)
          continue
        }
      }
    },
    onStageDelaystartChange (diff, rowIndex, subIndex) {
      let stageArr = this.stagesList[subIndex].stages
      let row = this.patternList[rowIndex]
      let ringsList = row.rings
      for (let rings of ringsList) {
        for (let ring of rings) {
          if (stageArr.includes(ring.id)) {
            ring.delaystart = (ring.delaystart ? ring.delaystart : 0) + diff
            continue
          }
        }
      }
    },
    onStageAdvanceendChange (diff, rowIndex, subIndex) {
      let stageArr = this.stagesList[subIndex].stages
      let row = this.patternList[rowIndex]
      let ringsList = row.rings
      for (let rings of ringsList) {
        for (let ring of rings) {
          if (stageArr.includes(ring.id)) {
            ring.advanceend = (ring.advanceend ? ring.advanceend : 0) + diff
            continue
          }
        }
      }
    },
    handleSplit (index) {
      if (this.patternOne.length > 0) {
        let currPattern = this.patternOne[0].rings
        setTimeout(() => {
          this.handleStageData(currPattern)
        }, 50)
      } else {
        let currPattern = this.planPattern.rings
        setTimeout(() => {
          this.handleStageData(currPattern)
        }, 50)
      }
    },
    selectPattern () {
      this.manualInfo.offset = 0
      let selectId = isNaN(parseInt(this.manualInfo.tempPatternid)) ? Number(this.manualInfo.tempPatternid.replace(/[^0-9]/ig, '')) : this.manualInfo.tempPatternid
      this.patternOne = this.allPatternList.filter(item => {
        return item.id === selectId
      })
      this.manualInfo.offset = this.offset
      for (let rings of this.patternOne[0].rings) {
        if (rings.length === 0) continue
        for (let ring of rings) {
          if (ring.value === 0) continue
          let currPhase = this.phaseList.filter((item) => {
            return item.id === ring.id
          })[0]
          ring.desc = currPhase.direction.map(item => {
            return {
              id: item,
              color: '#454545'
            }
          })
        }
      }
      this.handleStageData(this.patternOne[0].rings)
    },
    handleStageData (rings) { // stagesList
      for (let i = 0; i < rings.length; i++) {
        if (rings[i].length > 0) {
          let phaseList = []
          let stagesList = []
          // rings = JSON.parse(JSON.stringify(rings))
          let mapAdd = rings.map(item => {
            return item.map(val => {
              return val.value + (val.sum ? val.sum : 0)
            })
          })
          let maxCycle = mapAdd.length > 0 ? mapAdd.map(item => {
            return item.length > 0 ? item.reduce((a, b) => {
              return a + b
            }) : 0
          }) : 0
          this.max = Math.max(...maxCycle)// 每个环的周期最大值
          this.stateList = [0]
          this.narr = []
          let currentIds = ''
          let lastCurrentIds = ''
          for (let j = 0; j <= this.max; j++) { // 指针长度
            for (let i = 0; i < rings.length; i++) { // 环列表
              let ring = rings[i]// 每个环对象
              let sum = 0
              for (let n = 0; n < ring.length; n++) { // 相位累计长度
                if (ring[n].mode !== 7) {
                  sum = sum + ring[n].value + (ring[n].sum ? ring[n].sum : 0)
                  if (j < sum) {
                    let phaseId = ring[n].id
                    currentIds = currentIds + '-' + phaseId
                    break
                  }
                }
              }
            }
            if (lastCurrentIds !== currentIds && lastCurrentIds !== '') { // 当前相位id和上一个相比不同说明相位变化了
              phaseList.push(lastCurrentIds)
              this.stateList.push(j)// 阶段累计长度的集合
            }
            lastCurrentIds = currentIds
            currentIds = ''
          }
          let newPhaselist = []
          phaseList.forEach(i => {
            let rangeArr = i.split('-').map(Number)
            if (rangeArr.length > 2) {
              newPhaselist.push([
                JSON.parse(JSON.stringify(rangeArr[1])),
                JSON.parse(JSON.stringify(rangeArr[2]))
              ])
            } else {
              newPhaselist.push([
                JSON.parse(JSON.stringify(rangeArr[1]))
              ])
            }
          })
          for (let i = this.stateList.length - 1; i >= 1; i--) {
            this.narr.push(this.stateList[i] - this.stateList[i - 1])
          }
          // newPhaselist
          this.narr.reverse()// 阶段差
          for (let i = 0; i < newPhaselist.length; i++) {
            let stage = JSON.parse(JSON.stringify(newPhaselist[i]))
            let stageItem = this.getStageItem(stage, rings, i)
            stagesList.push(JSON.parse(JSON.stringify(stageItem)))
          }
          this.stagesList = JSON.parse(JSON.stringify(stagesList))
        }
      }
    },
    getStageItem (stageArr, ringsList, i) {
      let res = {
        key: i,
        split: this.narr[i], // 阶段绿性比
        stages: stageArr,
        delaystart: 0,
        advanceend: 0
      }
      // let splitArr = []
      let delaystartArr = []
      let advanceendArr = []
      for (let rings of ringsList) {
        for (let ring of rings) {
          if (stageArr.includes(ring.id)) {
            // let split = ring.value
            let delaystart = ring.delaystart
            let advanceend = ring.advanceend
            // splitArr.push(split)
            delaystartArr.push(delaystart)
            advanceendArr.push(advanceend)
          }
        }
      }
      // splitArr.sort(function (a, b) { return a - b })
      delaystartArr.sort(function (a, b) { return b - a })
      advanceendArr.sort(function (a, b) { return a - b })
      // res.split = splitArr.length > 0 ? splitArr[0] : 0
      res.delaystart = delaystartArr.length > 0 ? delaystartArr[0] : 0
      res.advanceend = advanceendArr.length > 0 ? advanceendArr[0] : 0
      return res
    },
    initData () {
      // 判断有几个环，就创建几个看板
      //   let phaseList = this.globalParamModel.getParamsByType('phaseList')
      this.coordphaseOption = this.phaseList.map(ele => {
        return {
          value: ele.id
        }
      })
      //   this.overlap = this.globalParamModel.getParamsByType('overlaplList')
      //   this.agentId = getIframdevid()
      let rings = []
      if (this.phaseList.length === 0) {
        // this.$store.getters.tscParam.patternList = []
        return
      }
      for (let phase of this.phaseList) {
        rings.push(phase.ring)
      }
      this.ringCount = Array.from(new Set(rings)) // 去除数组重复的元素
      this.ringCount = this.ringCount.sort(this.sortNumbers) // 把数组中的值按照从小到大的顺序重新排序
      this.ringCounts = Array.from(new Set(rings)) // 去除数组重复的元素
      this.ringCounts = this.ringCounts.sort(this.sortNumbers) // 把数组中的值按照从小到大的顺序重新排序
    //   this.increaseId()
    //   this.getCycle()
    //   this.updatePhaseDescription()
    //   this.getOptionsOfRing()
    },
    sortNumbers (a, b) {
      return a - b
    },
    isRingCycleEqual (rings) {
      let isequal = true
      // this.patternmsg = []
      let maxCycle = 0
      for (let ring of rings) {
        if (ring.length === 0) continue
        let cycle = 0
        for (let r of ring) {
          if (r.mode === 7) { // 忽略相位不计周期
            continue
          }
          cycle = cycle + r.value
        }
        if (cycle > maxCycle && maxCycle === 0) {
          maxCycle = cycle
        }
        if (cycle !== maxCycle) {
          // this.patternmsg.push(rings.id)
          isequal = false
        }
      }
      return isequal
    },
    checkPatternRules (rings) {
      if (!this.isRingCycleEqual(rings)) {
        this.patternCycleEqual = false
      } else {
        this.patternCycleEqual = true
      }
      if (!this.patternCycleEqual) {
        let mess = `方案中存在环周期时长不一致`
        if (this.$i18n.locale === 'en') {
          mess = `Inconsistent loop cycle durations exist in the scheme`
        }
        this.$message({
          message: mess,
          type: 'error',
          dangerouslyUseHTMLString: true
        })
        return false
      }
    },
    handleManualControl () {
      let submitdata = {
        control: 100,
        delay: this.manualInfo.tempDelay !== undefined ? Number(this.manualInfo.tempDelay) : 0,
        duration: Number(this.manualInfo.duration),
        // duration: this.manualInfo.tempDuration !== undefined ? Number(this.manualInfo.tempDuration) : 0,
        data: {}
      }
      submitdata.data.offset = this.offset
      submitdata.data.cycle = this.cycle
      submitdata.data.rings = this.rings
      this.checkPatternRules(submitdata.data.rings)
      if (this.patternCycleEqual) {
        this.$emit('closePhaseControl', submitdata)
      }
    }
  }
}
</script>

<style>

</style>
